{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
{% import "bootstrap/utils.html" as util %}

{% block title %}Reactome Overlap{% endblock %}


{% block styles %}
    {{ super() }}
    {% include "dependencies/clustergrammer_styles.html" %}

{% endblock %}

{% block scripts %}
    {{ super() }}

    {% include "dependencies/common.html" %}
    {% include "dependencies/clustergrammer.html" %}
    <script>

        var about_string = 'Zoom, scroll, and click buttons to interact with the clustergram.';

        d3.json('/static/json/reactome_clustergrammer.json', function (network_data) {

            // define arguments object
            var args = {
                root: '#reactome-matrix',
                'network_data': network_data,
                'about': about_string,
                'col_tip_callback': test_col_callback,
                'tile_tip_callback': test_tile_callback,
                'cat_update_callback': cat_update_callback,
                'sidebar_width': 150,
                // 'ini_view':{'N_row_var':20}
                // 'ini_expand':true
            };

            resize_container(args);

            d3.select(window).on('resize', function () {
                resize_container(args);
                cgm.resize_viz();
            });

            cgm = Clustergrammer(args);

            $(".wait_message").remove();

        });


        function cat_update_callback() {
            console.log('callback to run after cats are updated');
        }

        function test_tile_callback(tile_data) {
            var row_name = tile_data.row_name;
            var col_name = tile_data.col_name;

        }

        function test_col_callback(col_data) {
            var col_name = col_data.name;
        }

        function resize_container(args) {

            var screen_width = window.innerWidth;
            var screen_height = window.innerHeight - 20;

            d3.select(args.root)
                .style('width', screen_width + 'px')
                .style('height', screen_height + 'px');
        }


    </script>

{% endblock %}

{% block content %}
    {{ util.flashed_messages(dismissible=True, container=False) }}

    <h1 class='text-center wait_message'>Please wait ...</h1>
    <div class="text-center">
        <h3>Reactome Overlap Heatmap</h3>
        <p>Note that this visualization does not contain the full set of Reactome pathways but only the 300 Reactome
            pathways with most overlaps</p>
        <div id="reactome-matrix"></div>
    </div>
    {% include "meta/footer.html" %}
{% endblock %}

